<template>
    <div class="container" @click="haneldGallaryClick">
        <div class="wrapper">
             <swiper :options="swiperOptions">
                <swiper-slide
                    v-for="(item, index) in imgs"
                    :key="index"
                >
                    <img class="gallary-img" :src="item" />
                </swiper-slide>
            </swiper>
            <div class="swiper-pagination"  slot="pagination"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CommonGallary',
    props: {
        imgs: {
            type: Array,
            default () {
                return []
            }
        }
    },
    data () {
        return{
            swiperOptions: {
               pagination: '.swiper-pagination',
               paginationType: 'fraction',
               //swiper监听到本身或者父级元素发生dom变化的时候进行自我刷新
               observer: true,
               observeParents: true,
            }
        }
    },
    methods: {
        haneldGallaryClick () {
           this.$emit('cloce') 
        }
    }
}
</script>

<style lang="stylus" scoped>
    .container >>> .swiper-container
        overflow invert
    .container
        display flex
        flex-direction column
        justify-content center
        z-index 99 
        position fixed
        left 0
        right 0
        top 0
        bottom 0
        background #000
        .wrapper
            width 100%
            height 0
            padding-bottom 100%
            .gallary-img
                width 100%
            .swiper-pagination
                color #fff
            

</style>

